<template>
  <div class="page-bebuy">
    <!-- 模块一：顶部盒子 -->
    <div class="page-bebuy" style="height: 60px">
      <!-- 小盒子 -->
      <div class="page-bebuy-row">
        <!-- 小房子 -->
        <div class="psc-m-hamburger">
          <router-link to="/">
            <van-icon name="wap-home-o" size="30" />
          </router-link>
        </div>

        <div class="m-toptab">值得买</div>
        <!-- 右侧两个小图标 -->
        <div class="psc-m-right">
          <!-- 搜索图标 -->
          <router-link to="/search">
            <van-icon name="search" size="30" />
          </router-link>
          <!--购物车图标 -->
          <router-link to="/cart">
            <van-icon name="shopping-cart-o" size="30" />
          </router-link>
        </div>
      </div>
    </div>

    <!-- 模块二：轮播图 -->
    <div class="m-swiperTab-container">
      <!--标题栏  -->
      <div class="m-swiperTab-title">
        <!-- 值得买图片 -->
        <img
          src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          alt=""
          class="u-title"
        />
        <div class="u-text">严选好物&nbsp;用心生活</div>
        <img
          src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
          alt=""
          class="u-bg"
        />
        <!-- 背景图 -->
      </div>

      <!-- 轮播图实现 -->
      <div class="m-swiper">
        <div class="swiper-container">
          <!--大盒子  -->
          <van-swipe
            class="swiper-wrapper"
            @change="swiperChange"
            :width="88"
            indicator-color="white"
            :loop="false"
          >
            <!-- 两个一组 -->
            <!-- 数组是两排，渲染是竖着的 -->
            <van-swipe-item
              class="u-swiperPage"
              v-for="(item, index) in newSwipList[0]"
              :key="index"
              initial-swipe
            >
              <div class="u-group">
                <a :href="item.columnUrl" class="u-item">
                  <div class="swiper-item">
                    <img :src="item?.picUrl" alt="" />
                    <p class="u-mainText">{{ item.mainTitle }}</p>
                    <p class="u-descText">{{ item.viceTitle }}</p>
                  </div>
                </a>
              </div>

              <div>
                <div class="u-group">
                  <a href="javascript:;" class="u-item">
                    <div class="swiper-item">
                      <img :src="newSwipList[1][index].picUrl" alt="" />
                      <p class="u-mainText">{{ newSwipList[1][index].mainTitle }}</p>
                      <p class="u-descText">{{ newSwipList[1][index].viceTitle }}</p>
                    </div>
                  </a>
                </div>
              </div>
            </van-swipe-item>
            <!-- 小点点相关 -->
            <template #indicator="{ active }">
              <div class="custom-indicator">
                <div class="slider">
                  <div class="content">
                    <div
                      class="slider-item"
                      :class="active === item - 1 ? 'active-item' : ''"
                      v-for="item in 4"
                      :key="item"
                    ></div>
                  </div>
                </div>
              </div>
            </template>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 模块三：瀑布流 -->
    <van-list @load="onLoad" offset="100">
      <div class="m-wrappers">
        <!-- 包裹左右两列的盒子 -->
        <div
          class="m-lookList"
          transition-duration="0"
          item-selector=".m-lookColumn-left"
          v-masonry
        >
          <!-- 包裹左侧的盒子 -->
          <div
            class="m-lookColumn-left"
            v-masonry-tile
            v-for="(item, index) in topicList"
            :key="index"
          >
            <!-- 单个商品的盒子 -->
            <!-- 图片的盒子 -->
            <div class="ImageWrapper">
              <img :src="item.picUrl" alt="" />
            </div>
            <!-- 文字描述 -->
            <div class="m-lookDesc" style="font-size: 14px">{{ item.title }}</div>
            <!-- 底部作者及浏览量的盒子 -->
            <div class="m-lookDetail">
              <!-- 作者头像及网名 -->
              <div class="m-userInfo">
                <img
                  src="http://yanxuan.nosdn.127.net/3769578a6595d8e3c61d1186123141e0.png?imageView&quality=65&thumbnail=48y48"
                  alt=""
                />
                <div class="m-userName">{{ item.nickname }}</div>
              </div>
              <!-- 眼睛图标及浏览量 -->
              <div class="pageviews">
                <img
                  src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png"
                  alt=""
                />
                <div class="m-upText">{{ item.readCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { NavData, lookPics } from '@/types/bebuy'
import { reqWyyxSwiper, reqWyyxTopic } from '@/api/bebuy'
import { computed } from 'vue'
import { throttle } from 'lodash'

// 轮播图列表
const swiperList = ref<NavData[]>([])
// 当前被激活的小圆点
const activeIndex = ref(0)

// 瀑布流列表数据
const topicList = ref<lookPics[]>([])
const page = ref(1)
const size = ref(2)

// 获取瀑布流列表数据
const getTopicList = async (page: number, size: number) => {
  const res = await reqWyyxTopic(page, size)
  // console.log(res)

  // 处理数据
  res.data.result[0].topics.forEach((item) => {
    const { avatar, title, nickname, picUrl, readCount } = item

    const topiceobj = {
      avatar,
      title,
      nickname,
      picUrl,
      readCount
    }
    topicList.value.push(topiceobj)
  })
  // console.log(topicList)

  const { avatar, title, nickname, picUrl, readCount } = res.data.result[0].look
  const lookobj = {
    avatar,
    title,
    nickname,
    picUrl,
    readCount
  }
  topicList.value.push(lookobj)
}

// 监听轮播图是否切换
const swiperChange = (e: any) => {
  activeIndex.value = e
}

// 获取轮播图数据
const getSwiperList = async () => {
  const res = await reqWyyxSwiper()
  if (res.code === '200') {
    console.log(res.data.navList)
    swiperList.value = res.data.navList
  }
}

// 组件滚动到底部后执行
const onLoad = throttle(() => {
  page.value += 1
  // 异步更新数据
  setTimeout(() => {
    getTopicList(page.value, size.value)
  })
}, 1000)

// 处理轮播图数据
const newSwipList = computed(() => {
  const arr: NavData[] = []
  const arr1: NavData[] = []
  swiperList.value.forEach((item, index) => {
    if (index < swiperList.value.length / 2) {
      arr.push(item)
    }
  })
  swiperList.value.forEach((item, index) => {
    if (index >= swiperList.value.length / 2) {
      arr1.push(item)
    }
  })
  return [arr, arr1]
})

onMounted(() => {
  getSwiperList()
  getTopicList(page.value, size.value)
})
</script>

<script lang="ts">
export default {
  name: 'MyZhiDeMai'
}
</script>

<style lang="less" scoped>
// <!-- 顶部盒子 -->

.van-list {
  margin-top: 10px;
}
.page-bebuy {
  background-color: #eeee;
  border-bottom: 1px solid #d9d9d9;
  position: relative;
}

.page-bebuy-row {
  z-index: 1;
  margin: auto;
  overflow: hidden;
  padding: 0 5px 0 5px;
  height: 60px;

  .psc-m-hamburger {
    display: block;
    float: left;
    line-height: 80px;
    height: 60px;
    .wap-home-o {
      bottom: 10;
    }
  }
}

.m-toptab {
  font-size: 18.75px;
  position: absolute;
  width: 56.25px;
  text-align: center;
  height: 46px;
  left: 40%;
  top: 40%;
}
.psc-m-right {
  display: block;
  float: right;
  height: 30px;
  margin-right: 10px;
  position: absolute;
  right: 17.8px;
  bottom: 11px;
}
// 中间轮播图
.m-swiperTab-container {
  position: relative;
  padding-top: 70px;
  background: #eee;
  width: 375px;
}
// 轮播图顶部
.m-swiperTab-title {
  position: absolute;
  top: 0;
  z-index: 1;
  .u-title {
    position: absolute;
    width: 66px;
    height: auto;
    top: 29px;
    left: 4px;
    z-index: 2;
  }
  .u-text {
    font-size: 14px;
    position: absolute;
    font-family: PingFangSC-Regular;
    left: 76px;
    top: 41px;
    color: #fff;
  }
  .u-bg {
    width: 375px;
    height: auto;
  }
}
// 小圆点
.slider {
  height: 0.5rem;
  width: 100%;
  background-color: sliderpink;
  position: absolute;
  bottom: 15px;
  display: flex;
  float: center;

  .content {
    position: absolute;
    left: 38%;
    top: 50%;
    display: flex;

    .slider-item {
      width: 10px;
      height: 1.5px;
      background-color: #d9d9d9;
      margin: auto 2px;
      padding-left: 10px;
    }

    .active-item {
      background-color: #dd1a21;
    }
  }
}
.m-swiper {
  width: 355px;
  height: 270px;
  margin: 0 auto;
  .swiper-container {
    height: 270px;
    width: 355px;
    background: #fff;
    border-radius: 10px;
    // margin-left: -45px;
    // margin-right: -45px;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    z-index: 1;

    .swiper-wrapper {
      transform: translate3d(0px, 0px, 0px);
      transition-duration: 0ms;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      box-sizing: content-box;
      .u-group {
        padding-top: 10px;
        width: 90px;
        background: #fff;
        a {
          display: inline-block;
          position: relative;
          width: 84px;
          height: 100px;
          word-wrap: break-word;
          word-break: normal;
          img {
            width: 60px;
            height: 60px;
            margin-left: 10px;
          }
          .u-mainText {
            font-family: PingFang-SC-Bold;
            font-weight: 700;
            font-size: 14px;
            width: 84px;
            height: 20px;
            // white-space: nowrap;
            // overflow: hidden;
            color: #333;
            text-align: center;
            line-height: 20px;
            margin: 1px 0px 0px;
          }
          .u-descText {
            width: 84px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #999;
            text-align: center;
            height: 15px;
            line-height: 15px;
            white-space: nowrap;
            overflow: hidden;
            margin: 1px 0px 0px;
          }
        }
      }
    }
  }
}
.secondary {
  background: #eee;
}
// 三：瀑布流

.m-wrappers {
  width: 375px;
  background-color: #eee;
  .m-lookList {
    width: 365px;
    margin: 5px;
    margin: auto;
    .m-lookColumn-left {
      width: 170px;
      margin-bottom: 10px;
      border-radius: 12px;
      margin-left: 10px;
      overflow: hidden;
      background-color: white;
      .ImageWrapper {
        width: 170px;
        img {
          width: 100%;
        }
      }
      // 文字描述
      .m-lookDesc {
        width: 170px;
        height: 29px;
        padding: 9px 2px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
      }
      .m-lookDetail {
        // width: 171px;
        // height: 44px;
        padding: 8px 8px 12px;
        display: flex;
        justify-content: space-between;
        .m-userInfo {
          width: 76px;
          height: 24px;
          display: flex;
          justify-content: right;
          img {
            width: 24px;
            height: 24px;
            border: 1px solid #d9d9d9;
            border-radius: 50%;
          }
          .m-userName {
            width: 48px;
            height: 24px;
            line-height: 24px;
            color: #7f7f7f;
            font-size: 12px;
            white-space: nowrap;
            margin-left: 4px;
          }
        }
        .pageviews {
          width: 50px;
          height: 24px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
          }
          .m-upText {
            width: 26px;
            height: 16px;
            color: #7f7f7f;
            margin-left: 2px;
            text-align: right;
            font-size: 12px;
          }
        }
      }
    }
  }
}
// }
</style>
